<template>
	<view class="box">
		<view class="content">
			<view class="header">
				
				<view class="fan" >
					<text @tap="hui()"> < </text>
				</view>
				
				<view class="tou">
					<text>{{name}}</text>
				</view>
				
				<text class="one">新品</text>
				<text class="two">销量</text>
				<text class="three" @tap="price">价格</text>
				<text class="four">筛选</text>
			</view>
			
			<view class="goods" v-for="item in box" :key="item.id" @tap="jump(item)">
				
				<view class="img">
					<image :src="item.cover_img" mode="" class="da"></image>
				</view>
				<view class="desc">
					<text>{{item.gname}}</text>
				</view>
				<view class="price">
					<text>¥{{item.price_now}}</text>
				</view>
				
				<view class="city">
					<text>{{item.origin_city}}</text>
				</view>
					
			</view>
			
			
			
			
			
		</view>
	</view>
</template>

<script>
    import { product, detail} from "../../../util/kind/index.js"
	export default {
		data() {
			return {
				name:'',
				box:[]
			};
		},
		onLoad(option){
			
			const val = JSON.parse(decodeURIComponent(option.id));
			console.log(val)
			
			this.name = val.ctitle
			
			
			product({
				kindId:val.id,
				start:"1",
				limit:"10"
			}).then(res=>{
				console.log(res)
				this.box = res.data.data.list
			})
			
		},
		methods:{
			hui(){
				uni.navigateBack({
					delta:0
				})
			},
			jump(val){
				uni.navigateTo({
					url:'/pages/goods/goods?id='+ encodeURIComponent(JSON.stringify(val))
				})
			}
		}
	}
</script>

<style lang="scss">
	.box{
		padding-top: var(--status-bar-height);
	}
	.content{
		width: 100%;
		height: 1300px;
		background-color: #f1ece7;
	}
	
	.header{
		width: 100%;
		height: 80px;
		background-color:#354E44;
	}
	.fan{
		font-size: 26px;
		color: #fff;
		
	}
	.tou{
		color: #fff;
		font-size: 18px;
		position: absolute;
		top: 10px;
		left: 40%;
	}
	.one{
		margin-right: 30px;
		margin-left: 30px;
		color: #fff;
		margin-top: 60px;
		position: absolute;
		top: 0px;
		left: 0px;
	}
	.two{
		margin-right: 30px;
		color: #fff;
		position: absolute;
		top: 60px;
		left: 120px;
	}
	.three{
		margin-right: 30px;
		color: #fff;
		position: absolute;
		top: 60px;
		left: 230px;
	}
	.four{
		margin-right: 30px;
		color: #fff;
		position: absolute;
		top: 60px;
		left: 300px;
	}
	.goods{
		width: 150px;
		height: 200px;
		margin-top: 20px;
		background-color: #fff;
		float: left;
		margin-right: 20px;
		margin-left: 15px;
	}
	.img{
		width: 150px;
		height: 120px;
		background-color: #f5f5f5;
	}
	.da{
		width: 150px;
		height: 120px;
	}
	
	.desc{
		font-size: 18px;
		font-weight: 800;
		margin-top: 20px;
	}
	.price{
		font-size: 14px;
	}
	.city{
		font-size: 14px;
		position: absolute;
		margin-left:100px;
		margin-top: -10px;
	}

</style>
